<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width = device-width , initial-scale = 1 , minimum-scale = 1 , maximum-scale = 1 , user-scalable = no">
    <meta name="language" content="en" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="../../resource/css/userImageCutDemo.css" type="text/css" />
    <link rel="stylesheet" href="../../resource/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../resource/css/common.css">
    <link rel="stylesheet" href="../../resource/css/style.css">
    <link rel="stylesheet" href="../../resource/css/imageClipStyle/comm.css">
    <link rel="stylesheet" href="../../resource/css/imageClipStyle/imageStyle.css">
</head>
<body>
<div id="header"  class="bg-color-2">
    <a class="nav-back">返回</a>
    头像
    <span></span>
</div>
<div class="detail-part bg-color-2">
    <div class="detail-head bd-bot">
        <label class="head-image-user" for="head-image"><strong class="target-word">从相册中选择</strong></label>
        <input id="head-image" name="head-image" type=file accept="image/*">
    </div>
</div>
<div class="user-default default-pad">

</div>
<div class="lazy_tip" id="lazy_tip">
    <span>1%</span><br>
    加载是很重要的......
</div>
<div class="lazy_cover"></div>
<div class="resource_lazy hide"></div>

<form class="pic_edit">
    <h2 style="color: #FFFFFF">图片编辑(双指旋转和双指缩放)</h2>

    <div id="clipArea"></div>
    <button id="upload2">选择图片</button>
    <button id="clipBtn">上传图片</button>

    <input type="file" id="file" style="opacity: 0;position: fixed;bottom: -100px">
</form>
<img src="" title="upload.jpg" fileName="" id="hit" style="display:none;z-index: 9">

</body>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../../resource/js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../../resource/js/bootstrap.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../../resource/js/commonjs.js"></script>
<script src="../../resource/js/imageClip/jquery-2.1.0.min.js"></script>
<script src="../../resource/js/imageClip/sonic.js"></script>
<script src="../../resource/js/imageClip/comm.js"></script>
<script src="../../resource/js/imageClip/hammer.js"></script>
<script src="../../resource/js/imageClip/iscroll-zoom.js"></script>
<script src="../../resource/js/imageClip/jquery.photoClip.js"></script>
<script>
    var hammer = '';
    var currentIndex = 0;
    var body_width = $('body').width();
    var body_height = $('body').height();

    $("#clipArea").photoClip({
        width: body_width * 0.8125,
        height: body_width * 0.8125,
        file: "#file",
        view: "#hit",
        ok: "#clipBtn",
        loadStart: function () {
            //console.log("照片读取中");
            $('.lazy_tip span').text('');
            $('.lazy_cover,.lazy_tip').show();
        },
        loadComplete: function () {
            //console.log("照片读取完成");
            $('.lazy_cover,.lazy_tip').hide();
        },
        clipFinish: function (dataURL) {
            $('#hit').attr('src', dataURL);
            saveImageInfo();
        }
    });

    //图片上传
    function saveImageInfo() {
        var filename = $('#hit').attr('fileName');
        var img_data = $('#hit').attr('src');

        $.post("这里填写图片获取的网址", {image: img_data}, function (data) {
            if (data != '') {
//			console.info(data);
                //data 为返回文件名；
                alert('提交成功');
            }
        });
    }
    /*获取文件拓展名*/
    function getFileExt(str) {
        var d = /\.[^\.]+$/.exec(str);
        return d;
    }
    //图片上传结束
    $(function () {
        $('#upload2').on('touchstart', function () {
            //图片上传按钮
            $('#file').click();
        })
    })

</script>
<div id="cover"></div>
</body>
</html>